<template>
	<template v-for="(item, index) in menuData" :key="index">
	  <template v-if="item.visible == '0' && item.menuType == 'M'">
		<el-sub-menu
		  :index="String(item.path)"
		  @click="changeBackgroundColor(index)"
		  :class="{ 'active': activeIndex === index }"
		  :style="{ backgroundColor: activeIndex === index ? 'yellow' : '' }"
		>
		  <template #title>
			<el-icon><GobletFull /></el-icon>
			<span>{{ item.menuName }}</span>
		  </template>
		  <recursion :menu-data="item.children" />
		</el-sub-menu>
	  </template>
	</template>
  </template>
  
  <script>
  import { ref } from "vue";
  
  export default {
	props: {
	  menuData: Array
	},
	setup(props) {
	  const activeIndex = ref(0);
	  const changeBackgroundColor = (index) => {
		if (activeIndex.value === index) {
		  activeIndex.value = null; // 取消选中
		} else {
		  if (activeIndex.value !== null) {
			activeIndex.value = index; // 切换选中到当前项
		  } else {
			activeIndex.value = index; // 首次点击选中当前项
		  }
		}
	  };
  
	  return {
		activeIndex,
		changeBackgroundColor
	  };
	}
  };
  </script>
  
  <style scoped>
  .el-sub-menu.active {
	background-color: yellow; /* 点击选中时的背景色 */
  }
  </style>
  